<template>
    <div class="body">
        <el-dialog
                :title="title"
                :visible.sync="dialogFormVisible"
                width="600px"
                :close-on-click-modal="false"
                @close="close"
        >
            <el-form ref="form" :model="form" label-width="60px">
<!--                    <div class="stock" v-if="type=='dStock'">-->
<!--                        <div class="flex wid mar_b10" v-for="(item,index) in dStock" :key="index">-->
<!--                            <div class="t_r flex-g-0 wid20 pad_r_25">{{item.name}}</div>-->
<!--                            <div class="flex-g-1 wid80">-->
<!--                                <el-input v-model="item.stock" autocomplete="off" type="number">-->
<!--                                    <template slot="append">件</template>-->
<!--                                </el-input>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                <el-form-item label="" prop="price" v-if="type=='dPrice'">
                        <div class="flex wid mar_b10" v-for="(item,index) in dPrice" :key="index">
                            <div class="t_r flex-g-0 wid20 pad_r_25">{{item.specsName}}</div>
                            <div class="flex-g-1 wid80">
<!--                                <el-input v-model="item.SalesPrice" autocomplete="off" type="number">-->
<!--                                    <template slot="append">元</template>-->
<!--                                </el-input>-->
                                <el-input-number v-model="item.SalesPrice" :precision="2" :step="1" style="width: 300px" :min="0.00"></el-input-number>
                            </div>
                        </div>
                </el-form-item>
                <el-form-item label="" prop="stock" v-if="type=='dStock'">
                    <div class="flex wid mar_b10" v-for="(item,index) in dStock" :key="index">
                        <div class="t_r flex-g-0 wid20 pad_r_25">{{item.specsName}}</div>
                        <div class="flex-g-1 wid80">
<!--                            <el-input v-model="item.SalesStock" autocomplete="off" type="number">-->
<!--                                <template slot="append">件</template>-->
<!--                            </el-input>-->
                            <el-input-number v-model="item.SalesStock" :min="0" style="width: 300px"></el-input-number>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="medium" @click="close">取 消</el-button>
                <el-button size="medium" type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {goodSpecsList,goodsSpecsSave} from "@/api/good";
    import {mapState} from "vuex";

    export default {
        name: "goodlistedit",
        created() {

        },
        // computed: {
        //     ...mapState(['storeId']),
        // },
        data() {
            return {
                form: {
                    name: "",
                    price: "",
                    stock: "",
                },
                dStock:[
                    {
                        name:"大份",
                        stock:"10",
                    },
                    {
                        name:"中份",
                        stock:"1000",
                    },
                    {
                        name:"小份",
                        stock:"100",
                    },
                ],
                dPrice:[
                    {
                        name:"大份",
                        stock:"10",
                    },
                    {
                        name:"中份",
                        stock:"1000",
                    },
                    {
                        name:"小份",
                        stock:"100",
                    },
                ],
                type: '',
                title: "",
                dialogFormVisible: false,
                storeId:'',
            }
        },
        components: {},
        methods: {
            showEdit(row,type) {
                    this.title = "编辑";
                    this.form = Object.assign({}, row);
                this.type = type;
                this.specData()
                this.dialogFormVisible = true;
            },
            setStoreId(storeId){
                this.storeId = storeId
            },
            async specData() {
                const {data} = await goodSpecsList({id:this.form.id,storeId:this.storeId});
                // console.log(data)
                if(this.type=='dPrice'){
                    this.dPrice = data
                } if(this.type=='dStock'){
                    this.dStock = data
                }
            },
            close() {
                this.$refs["form"].resetFields();
                this.form = this.$options.data().form;
                this.dialogFormVisible = false;
            },
            async save() {
                var params={}
                if(this.type=="dPrice"){
                    params={
                        id:this.form.id,
                        price:this.dPrice,
                        storeId:this.storeId,
                    }
                }else if(this.type=="dStock"){
                    params={
                        id:this.form.id,
                        stock:this.dStock,
                        storeId:this.storeId,
                    }
                }
                const {msg} = await goodsSpecsSave(params);
                this.$baseMessage(msg, "success");
                this.$emit("fetchData");
                this.close();
            },
        }
    };
</script>
<style lang="scss">
    .stock{
        width: 400px;
        margin: 0 auto;
    }
</style>
